@include treelist-ui(
    $ui: 'nav',
        // Extra padding left/right
    $padding: 0 10px,

        // Black-ish background color
    $background-color: $menu-background-color,
    $toolstrip-background-color: #4b474f,

    $tool-selected-color: #dadada,
    $tool-selected-background-color: #5fa2dd,

    $tool-float-indicator-width: 4px,
    $tool-float-indicator-color: #5fa2dd,

        // Darker background for expanded subtrees
    $item-expanded-background-color: $menu-background-color,

        // Taller line height
    $item-line-height : 36px,

        // Off-white text
    $item-icon-color: $menu-text-color,
    $item-expander-color: $menu-text-color,
    $item-text-color: $menu-text-color,

        // Brighter when hovered
    $row-over-background-color: #3a6f6b,
    $item-icon-over-color: $menu-text-color,
    $item-expander-over-color: $menu-text-color,
    $item-text-over-color: $menu-text-color,

    $row-indicator-width: 6px,
    $row-indicator-selected-color: #2ed1b6,
    $row-indicator-selected-over-color: lighten(#2ed1b6, 10%),
    $row-indicator-over-color: lighten(#2ed1b6, 10%),

        // Various sizes for the pieces:
    $item-icon-font-size: 18px,
    $item-icon-width: 24px,
    $item-expander-font-size: 16px,
    $item-expander-width: 24px,

    $row-selected-background-color: #406770
);
.treelist-with-nav .#{$prefix}panel-body {
  background-color: #32404e;
}
/*
.x-treelist-navigation .x-treelist-item-text {
    color: #adb3b8;
    margin-left: 18px;
    margin-right: 24px;
    font-size: 16px;
    line-height: 44px;
}*/

/*.x-treelist-navigation .x-treelist-item-icon:before,
.x-treelist-navigation .x-treelist-item-tool:before,
.x-treelist-navigation .x-treelist-item-expander {
    line-height: 44px;
}*/

//--------------------------------------------------------
// Create classes for full-size responsive items

.big-100 {
    @include responsivecolumn-item(100%);
}

.big-60 {
    @include responsivecolumn-item(60%);
}

.big-50 {
    @include responsivecolumn-item(50%);
}

.big-40 {
    @include responsivecolumn-item(40%);
}

.big-33 {
    @include responsivecolumn-item(33.33%);
}

.big-20 {
    @include responsivecolumn-item(20%);
}

//--------------------------------------------------------
// And classes for small-size responsive items

 .x-responsivecolumn-small {
     > .small-100 {
         @include responsivecolumn-item(100%);
     }

     > .small-50 {
         @include responsivecolumn-item(50%);
     }
}

//--------------------------------------------------------
$logo-height: 35px;
.sencha-logo {
    background-color: $base-color;
}
.sencha-font {
	//background-color: $base-color;
    height: $logo-height;
	float:left;
	font-size: 24px;
    letter-spacing:1px;
	//padding-top:($logo-height - 20)/2;
	margin-left: 5px;
	margin-right: 5px;
    color: #fff;
    align:center;
    font-weight: 600;
	//float:left;
    //color: $lightest-color;
	font-family: 'Microsoft YaHei', sans-serif;
    
}
.main-logo {
	background-color: $base-color;
    height: $logo-height;
	float:left;
	//padding-top:10px;
	padding-left: 7px;
	
}

.sencha-dash-dash-headerbar {
    padding:0 10px 0 0;
    background-color: #2bc891;
    position:fixed;
    width:100%;
    z-index:10;
    border:none;
    .header-right-profile-image {
        border-radius: 20px;
    }
}
.top-english-button{
    .x-btn-icon-el{
        width:21px;
        height:14px;
    }
}
.collapsed{
    .hot-icon,.new-icon{
        &:after{
            display:none;
        }
    }
    .x-tree-elbow-img{
        display:none;
    }

    .x-tree-node-text {
        display:none;
    }
}
.x-grid-cell{
    position:relative;
}
.hot-icon,.new-icon{
    &.hot-icon:after{
        content: "HOT";
        background:#e3495a;
    }
    &.new-icon:after{
        content: "NEW";
        background:$base-color;
    }
    &:after{
        height: 18px;
        width: 34px;
        display: inline-block;
        position: absolute;
        top: 22px;
        right: -180px;
        text-align:center;
        color: $lightest-color;
        font-weight: bold;
        font-size: 10px;
        line-height: 18px;
    }
}

/*.x-treelist-item-tool {
    height: $panel-navigation-item-line-height;
    &.hot-icon:after, &.new-icon:after{
        background: $panel-header-background-color;
        content: '';
    }
}*/

//.toolbar-btn-shadow{
//    @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
//    .x-btn-over{
//        background-color: $button-toolbar-hover-background-color;
//    }
//}

//Add border around html editor field
.x-html-editor-input{
    border:1px solid #ccc;
}

//UI Styles for buttons
@include extjs-button-small-ui(
    $ui: 'soft-blue',
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-blue',
    $line-height: 34px,
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-blue',
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);

@include extjs-button-small-ui(
    $ui: 'facebook',
    $background-color: $social-facebook-btn-background,
    $border-color: darken($social-facebook-btn-background, 5%)
);
@include extjs-button-large-ui(
    $ui: 'facebook',
    $line-height: 34px,
    $background-color: $social-facebook-btn-background,
    $border-color: darken($social-facebook-btn-background, 5%)
);


@include extjs-button-small-ui(
    $ui: 'soft-cyan',
    $background-color: $color-soft-cyan,
    $border-color: darken($color-soft-cyan, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-cyan',
    $background-color: $color-soft-cyan,
    $border-color: darken($color-soft-cyan, 5%)
);


@include extjs-button-small-ui(
    $ui: 'soft-green',
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-green',
    $line-height: 34px,
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-green',
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);



@include extjs-button-small-ui(
    $ui: 'soft-red',
    $background-color: $color-soft-red,
    $border-color:darken($color-soft-red, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-red',
    $background-color: $color-soft-red,
    $border-color:darken($color-soft-red, 5%)
);


@include extjs-button-small-ui(
    $ui: 'soft-purple',
    $background-color: $color-soft-purple,
    $border-color:darken($color-soft-purple, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-purple',
    $background-color: $color-soft-purple,
    $border-color:darken($color-soft-purple, 5%)
);


@include extjs-button-small-ui(
    $ui: 'gray',
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);
@include extjs-button-large-ui(
    $ui: 'gray',
    $line-height: 34px,
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'gray',
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);

@include extjs-button-small-ui(
    $ui: 'green',
    $background-color: $color-green,
    $border-color:darken($color-green, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'green',
    $background-color: $color-green,
    $border-color:darken($color-green, 5%)
);


@include extjs-button-small-ui(
    $ui: 'blue',
    $background-color: $color-blue,
    $border-color:darken($color-blue, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'blue',
    $background-color: $color-blue,
    $border-color:darken($color-blue, 5%)
);

@include extjs-button-small-ui(
    $ui: 'header',
    $color: #fff,
    $glyph-color: #fff,
    $background-color: transparent,
    $border-width: 0
);

.is-animate.style4 > div { animation-name: style4; }

.is-animate > div {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

.is-animate > div:nth-child(1) { animation-delay: 0.0s }
.is-animate > div:nth-child(2) { animation-delay: 0.6s }
.is-animate > div:nth-child(3) { animation-delay: 1.2s }
.is-animate > div:nth-child(4) { animation-delay: 1.8s }
.is-animate > div:nth-child(5) { animation-delay: 2.4s }
.is-animate > div:nth-child(6) { animation-delay: 3.0s }
.is-animate > div:nth-child(7) { animation-delay: 3.6s }
.is-animate > div:nth-child(8) { animation-delay: 4.2s }

@keyframes style1 {
    from, 20%, 53%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0,0.5,0.1);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0px, -35px, 0);
    }
}

@keyframes style2 {
    from {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, .95, 1);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes style3 {
    from {
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes style4 {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}